<template>
	<div>
		<div>
			<van-nav-bar title="维保历史" left-text="返回" @click-left="back()" left-arrow fixed/>
		</div>
		<div style="margin-top: 1.25rem;">
			<div class="box" v-for="(item,index) in historyList">
				<div class="textflex">工单号：{{item.workNo}}</div>
				<div class="textflex">维保类型：{{(item.type == 0)? '常规保养' : '车辆维修'}}</div>
				<div class="textflex">维保日期：{{item.maintenanceTime}}</div>
				<div class="textflex">送修时间：{{item.deliveryTime}}</div>
				<div class="textflex">维保费用：{{item.deliveryTime}}</div>
				<div class="textflex">维保状态：{{(item.payment.status==0)?"待支付":((item.payment.status==1)?"维保中":"已完成")}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	import request from '@/util/request'
	export default {
		name: 'record',
		data() {
			return {
				active: '/record',
				historyList: []
			}
		},
		created() {
			this.getHistoryList()
		},
		methods: {
			back() {
				this.$router.back()
			},
			getHistoryList() {
				request({
					url: '/dev-api/bs-vehicle-owner/maintenance-appointment/page?pageSize=100&carId=' + JSON.parse(
						window.localStorage
						.getItem('carInfo')).carId,
					methods: 'get'
				}).then(res => {
					this.historyList = res.rows
				})
			}
		}
	}
</script>

<style>
	.textflex {
		text-align: left;
		margin: 5px;
	}

	.box {
		font-size: 15px;
		padding: 10px;
		margin: 15px 10px;
		border: 2px solid #7f7f7f;
		border-radius: 10px;
	}
</style>
